<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/taglib/c.tld" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <title>添加楼栋单元</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css">
    <script src="/plugins/jquery.min.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script src="/js/core/helper.js"></script>
    <script src="/js/core/utils.min.js"></script>

</head>
<body>
<form class="layui-form layui-form-pane" id="buildingForm" style="padding:10px" action="/BuildingCtrl/insertBuildings.x">
    <div class="layui-form-item">

        <label class="layui-form-label">区域</label>
        <div class="layui-input-inline">
            <input id="section" type="text" name="sectionName" placeholder="请输入区域"
                   autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-label">区内编号</label>
        <div class="layui-input-inline">
            <input id="area" type="text" name="areaInput" required lay-verify="required" placeholder="请输入区域内楼栋号"
                   autocomplete="off" class="layui-input">

        </div>
        <div class="layui-input-inline">
            <input type="checkbox" title="别墅" id="isVilla">
        </div>
        <input type="hidden" name="commCode" value="${commCode }"/>
        <input type="hidden" name="commName" value="${commName }"/>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">楼栋编号</label>
        <div class="layui-input-inline">
            <input id="areaName" type="text" name="areaNameInput" placeholder="楼栋总体编号"
                   autocomplete="off" class="layui-input" value="">
        </div>
        <label class="layui-form-label">单元数</label>
        <div class="layui-input-inline">
            <input id="building" type="text" name="buildingInput" required lay-verify="required"
                   placeholder="请输入该楼栋单元数" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="button" class="layui-btn" value="新增" onclick="addBuildings()"/>
        </div>
    </div>


    <div id="floors"></div>

    <div id="submitContainer" class="layui-form-item">
        <div id="subBtn" class="layui-input-block">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
</html>
<SCRIPT language="javascript">
    var $, layer;
    var index = parent.layer.getFrameIndex(window.name);
    layui.use(['jquery', 'layer', 'form'], function (args) {
        var form = layui.form();
        var layer = layui.layer;
        $ = layui.jquery;
        layer = layui.layer;
        if ("${msg}" != '')
            parent.layer.alert("${msg}");

        /* 提交前组装每行数据 */
        form.on('submit(building)',function (data) {
            var lines = $(".buildingLine").length;
            var isVilla = $('#isVilla').is(':checked')?1:0;
            for(var i=0;i<lines;i++){
                var area = $('.buildingLine').eq(i).children("input.area").val();
                var section = $('.buildingLine').eq(i).children("input.section").val();
                var areaAliasName = $('.buildingLine').eq(i).children().children("input.areaAliasName").val();
                var building = $('.buildingLine').eq(i).children("input.building").val();
                var floor = $('.buildingLine').eq(i).children().children("input.floor").val();
                var room = $('.buildingLine').eq(i).children().children("input.room").val();
                var dev = $('.buildingLine').eq(i).children().children("input.dev").val();
                var areaName = $('.buildingLine').eq(i).children("input.areaName").val();

                if(areaName == undefined || areaName == '')
                    areaName = "none";

                $('.buildingLine').eq(i).children("input.buildingData").val(section +"-"+area+"-"+areaAliasName+"-"+building+"-"+floor+"-"+room+"-"+dev+"-"+areaName+"-"+isVilla);
            }

            postJson("/BuildingCtrl/insertBuildingsSave.x",$("#buildingForm").serialize(),function (data) {
                layer.msg("提交成功!");
            });
            return false;
        });
    });

    function addBuildings() {
        var area = $('#area').val();
        var section = $("#section").val();

        var areaAliasName = section+"区"+area+"栋";

        if(section == null || section == ''){
            areaAliasName = appendZero(area)+"栋";
            section = 1;
        }
        var building = $('#building').val();

        var areaName = $('#areaName').val();

        for (var i = 1; i <= building; i++) {
            $('#floors').append(
                '<div class="layui-form-item floors">' +
                    '<div class="layui-inline buildingLine">' +
                        '<div class="layui-input-inline" style="width: 100px;">' +
                            '<input type="text" name="areaAliasName"  autocomplete="off" class="layui-input areaAliasName" value='+areaAliasName+'>' +
                        '</div>' +
                        '<label class="layui-form-label">' + i + '单元</label>' +
                        '<input type="hidden" name="area"  autocomplete="off" class="layui-input area" value='+area+'>' +
                        '<input type="hidden" name="section"  autocomplete="off" class="layui-input section" value='+section+'>' +
                        '<input type="hidden" name="building"  autocomplete="off" class="layui-input building" value='+i+'>' +
                        '<div class="layui-input-inline">' +
                            '<input type="text" name="floor" required  lay-verify="required" placeholder="请输入该单元楼层" autocomplete="off" class="layui-input floor">' +
                        '</div>' +
                        '<div class="layui-input-inline">' +
                            '<input type="text" name="room" required  lay-verify="required" placeholder="请输入每层户数" autocomplete="off" class="layui-input room">' +
                        '</div>' +
                        '<div class="layui-input-inline">' +
                            '<input type="text" name="dev" required  lay-verify="required" placeholder="该单元门口机数" value="1" autocomplete="off" class="layui-input dev">' +
                        '</div>' +
                        '<div class="layui-input-inline">' +
                            '<button type="button" class="layui-btn layui-btn-danger"><i class="layui-icon" style="font-size:30px">&#x1007;</i></button>' +
                        '</div>' +
                        '<input type="hidden" name="areaName" class="areaName" value='+areaName+'>' +
                        '<input type="hidden" name="buildingData" class="buildingData">' +
                    '</div>' +
                '</div>'
            )
        }

        $("button").click(function () {
            $(this).parent().parent().parent().remove();
        });

        /* 动态生成的元素，input中的required不生效，为了进行内容验证，不得不重新append一次 */
        $('#subBtn').remove();
        $('#submitContainer').append(
            '<div id="subBtn" class="layui-input-block">' +
            '<button class="layui-btn" lay-submit lay-filter="building">立即提交</button>' +
            '<button type="reset" class="layui-btn layui-btn-primary">重置</button>' +
            '</div>'
        );

        parent.layer.iframeAuto(index);
    }

</SCRIPT>